<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="include/base.jsp" %>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>CRM</title>
	<link rel="stylesheet" href="${basePath }/css/bootstraplan.css" />
	<style type="text/css">
		#tag{
			background-image: url(${basePath }/img/highrise_sprites.png);
			no-repeat :none;
			background-position:-68px -180px;
			width: 42px;
			padding-top: 40px;
			padding-bottom:20px;
		}
		#defaulthead{
			background-image: url(${basePath }/img/highrise_sprites.png);
			no-repeat :none;
			background-position:-116px -55px;
			width: 40px;
			height:40px;
			padding-top: 10px;
		}
		tr{
			border-bottom:1px solid #C8CECC;
		
		}	
	</style>
</head>
<body>
	<div class="navbar navbar-fixed-top"  style="background-color:#085F8A;">
		<div class="navbar-inner" style="padding-top:20px;">
			<div class="container">
				<div class="row-fluid">
					<div class="span1"  id="tag"></div>
					<div class="span2" style="padding-top:6px">
						<a href="" style="display:inline;font-size:20px;font-weight:bold;color:#fff">客户关系管理</a>
					</div>
					<div class="span6">
						<a href="${basePath }/addContact.action" class="btn">添加联系人</a>
						<a href="${basePath }/addTask.action" class="btn">添加新任务</a>
					</div>
					<div class="span3">
						<ul class="nav pull-right">
						    <li class="divider-vertical"></li>
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown"> 用户设置<b class="caret"></b></a>
								<ul class="dropdown-menu">
									<li>
										<a href="#">个人信息</a>
									</li>
									<li>
										<a href="#">修改密码</a>
									</li>
									<li>
										<a href="#">服务中心</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="#">安全退出</a>
							</li>
						</ul>
					
					
					</div>
				</div>
			</div>
		
		</div>
	
	</div>
	<div class="row-fluid">
		<div class="span3">
			<div style="padding-left:16px 0;margin-top:160px;margin-left:20px">
				<ul class="nav nav-list" >
					<li class="nav-header" style="padding-top:0px;font-size:16px">Welcome!</li>
					<li><a href="home.action"><i class="icon-home"></i>最新动态</a></li>
					<li class="active"><a href="${basePath }/contactlist.action"><i class="icon-user"></i>联系人</a></li>
					<li><a href="task/toCalendar.action"><i class="icon-leaf"></i>日程</a></li>
					<li><a href="deal.action"><i class="icon-gift"></i>交易</a></li>
					<li><a href="emails.action"><i class="icon-gift"></i>群发邮件</a></li>
				</ul>
			</div>
		</div>
		<div class="span8" style="margin-top:140px;">
			<div style="border:1px solid #C8CECC;border-radius:5px 5px 0px 0px;">
				<div style="height:60px;padding-top:3px;background-color:#F0F5F8">
					<h3 style="padding-top:2px;padding-left:15px">所有的人和公司</h3>
				</div>
				<div class="row-fluid">
				<div class="span9">
					<div style="border-top:1px solid #C8CECC;">
						<div style="padding:20px;"> 
							<div style=""><b>根据条件搜索联系人：</b></div>
							<div style="margin-top:5px;font-size:12px;">
								<a class="search" data-toggle="modal" href="javascript:;" rel="${requestScope.q_like_username}">名字</a>
								<a class="search" href="javascript:;" rel="${requestScope.q_like_title}">职位</a>
								<a class="search" href="javascript:;" rel="${requestScope.q_like_email}">邮箱地址</a>
								<a class="search" href="javascript:;"rel="${requestScope.q_like_tel}">电话</a>
								<a class="search" href="javascript:;"rel="${requestScope.q_like_tag}">标签</a>
								<div id="popup" style="position:absolute; z-index:100; display:none; background-color:#eeeeee">
								
								</div>
							</div>
							<hr  style="border:1px dashed #999"/>
							<div style="margin-top:30px;">	
								<div id="mesg"style="float:left;display:;">Select contacts to add tags, change who can see them, or delete.</div><div style="float:right;"><a  id="sall"href="javascript:;">Select all</a></div>
								<div class="clearfix"></div>
								<div id="myh" style="border-bottom:1px solid #C8CECC;"></div>
								<div>
									<div id="myc" style="display:none;">
										<ul class="nav nav-tabs" id="my-tab">
											<li class="active"><a href="#addtag" id="t1"data-toggle="tab">添加标签</a></li>
											<li><a href="#changesee" id="t2"data-toggle="tab">更改权限</a></li>
											<li><a href="#delete" id="t2" data-toggle="tab">删除</a></li>	
										</ul>
										<div class="tab-content">
											<div class="tab-pane  active" id="addtag" style="display:none;">
												<form action="#" method="post" class="form-inline">
													<input type="text" />
													<a href="javascript:;" id="doadd" class="btn">给选中联系人添加标签</a>&nbsp;or&nbsp;
													<a href="">取消</a>
												</form>
											</div>
											<div class="tab-pane fade" id="changesee" style="display:none;">
												<form action="#" method="post">
													<h4>谁可以看到选中的联系人？</h4>
													<div class="controls">
														<label for="optionsRadios1" class="radio">
															<input type="radio" name="optionsRadios" id="optionsRadios1"checked="checked" value="所有人"/>所有人
														</label>
														<label for="optionsRadios2" class="radio">
															<input type="radio"  name="optionsRadios" id="optionsRadios2"value="只有我"/>只有我
														</label>
													</div>
													<a href="javascript:;" id ="cp" class="btn">更改权限</a>&nbsp;or&nbsp;
													<a href="">取消</a>	
												</form>
											</div>
											<div class="tab-pane fade" id="delete" style="display:none;">
												<form action="#" method="post">
													<div class="alert">
														<div>
															<h4>您确定要删除这些联系人吗？</h4><br />
															<h6 style="color:red">所有关于这个联系人的记录、邮件、任务、关系信息都将被彻底删除，此操作是不可恢复的，请慎重！</h6>
														</div>
														<a href="javascript:;" id="delc" class="btn">确认删除</a>&nbsp;or&nbsp;
														<a href="">取消</a>
													</div>
												</form>
											</div>
										</div>
									</div>
						<div id="联系人">
							<table style="width:600px;">
								<tbody>
									<s:if test="contactList==null">
										还没有联系人，您可以马上添加。
									</s:if>
									<s:else>
										<s:iterator value="contactList" var="contact">
										<tr>
											<td>
												<input type="checkbox" />
											</td>
											<td>
												<s:if test="#contact.type=='person'">
													<div id="defaulthead" style="margin-left:10px"></div>
												</s:if>
												<s:else>
													<div id="defaulthead" style="margin-left:10px;background-position:-6px -55px"></div>
												</s:else>
											</td>
											<td>
												<div style="margin-left:10px;">
													<h6>
														<b style="font-size:16px">
															<a href="${basePath }/contactmain.action?username=${contact.username}"><s:property value="#contact.username"/></a>
															<c:if test="${contact.views!='all'}"> 
															<img  style="display:;" src='${basePath }/img/lock.png'>
														    </c:if>
														    <img class='lock' style="display:none;" src='${basePath }/img/lock.png'>
														</b><br />
														
														<s:if test="#contact.companyName!=null">成员&nbsp;@&nbsp;<s:property  value="#contact.companyName"/><br /></s:if>
														<s:if test="#contact.emailList!=null">
															<s:iterator value="#contact.emailList" var="cm">
																<s:property value="#cm.email"/>
															</s:iterator>
														</s:if>&nbsp;<br/>
														<s:if test="#contact.telList!=null">
															<s:iterator value="#contact.telList" var="ct">
																<s:property value="#ct.telnum"/>
															</s:iterator>
														</s:if><br/>
														<s:if test="#contact.tagList!=null">
															<s:iterator value="#contact.tagList" var="tt">
																<code><s:property value="#tt.name"/></code>
															</s:iterator>
														</s:if><br/>
														<img class='loading' style="display:none;" src='${basePath }/img/loading.gif'>
													</h6>
												</div>
											</td>
										</tr>
										</s:iterator>
									
									</s:else>
								</tbody>
							</table>
						</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="span3" style="margin-left:0px;padding:10px;border-left:1px solid #C8CECC;border-top:1px solid #C8CECC;">
			
			<h5>快速导入和导出</h5>
			<hr>
			<h6><a href="${basePath }/addfile.action">导入</a>或<a href="${basePath }/downfile.action">导出</a>你的联系人。</h6>
		</div>
			
	</div>
		</div>	
	</div>
	</div>	
				
	<script type="text/javascript" src="${basePath }/js/jquery.js"></script>
	<script type="text/javascript" src="${basePath }/js/bootstrap.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			/* $(".search").click(function(){
				generateFloatLayer();
			});
			
			function generateFloatLayer(){
			 floatArea=document.getElementById("popup");
			 floatArea.style.display="none";
			 divClose='<div id="close" style="position:absolute; right:10px; top:10px; left:auto; bottom:auto;"><a href="javascript:closeFloat();">X</a></div><br>';
			 x=event.clientX + document.body.scrollLeft;
			 y=event.clientY + document.body.scrollTop;
			 floatArea.innerHTML=divClose+"<div id=\"floatcontent\">some content</div>";
			 floatArea.style.border="1px solid #999";
			 floatArea.style.left=(document.documentElement.scrollLeft+x-15)+"px";
			 floatArea.style.top=(document.documentElement.scrollTop+y-50)+"px";
			 floatArea.style.width="50px";
			 floatArea.style.height="30px";
			 floatArea.style.display="";
			}
			function closeFloat(){
			 floatArea=document.getElementById("popup");
			 floatArea.innerHTML="";
			 floatArea.style.display="none";
			} */
						
			
			$("#sall").click(function(){
				if($(this).html()=="Select all"){
					$(":checkbox").attr("checked","true");
					$(":checkbox").parent().parent().css("background-color","#ffc");
					$("#myh").css("border","none");
					var n = $(":checked:checkbox").size();
					$("#mesg").html(n+"   contacts are selected");
					$("#sall").html("Select none");
					$("#myc").show("slow");
					return;	
				}else{
					$(":checkbox").removeAttr("checked");
					$("#myc").hide("slow");
					$("#myh").css("border","1px solid #C8CECC;");
					$(":checkbox").parent().parent().css("background-color","#F9F7F7");
					$("#sall").html("Select all");
					$("#mesg").html("Select contacts to add tags, change who can see them, or delete.");
					$(".tab-pane").hide();
					return;
				}	
			});
			$(":checkbox").click(function(){
				if($(this).attr("checked")!=null){
					$("#myh").css("border","none");
					$(this).parent().parent().css("background-color","#ffc");
					var n = $(":checked:checkbox").size();
					$("#mesg").html(n+"   contacts are selected");
					$("#sall").html("Select all");
					$("#myc").show("slow");	
					return;
				}else{
					var n = $(":checked:checkbox").size();
					$(this).parent().parent().css("background-color","#F9F7F7");
					if(n==0){
						$("#myc").hide("slow");
						$("#myh").css("border","1px solid #C8CECC;");
						$("#sall").html("Select all");
						$("#mesg").html("Select contacts to add tags, change who can see them, or delete.");
						$(".tab-pane").hide();
					}else{
						$("#mesg").html(n+"   contacts are selected");
					}
				return;
				}
			});
			
			$("a[data-toggle]").click(function(){
				var id = $(this).attr("href");
				$(".tab-pane").hide();
				$(id).show("slow");
			});
			$("#doadd").click(function(){
				$(":checked:checkbox").parent().next().next().children().children().children("img").show();
				var value = $(this).prev().attr("value");
				if(value!=""){
					var usernameList = new Array();
					var che = new Array();
					che =  $(":checked:checkbox");
					for(var i=0;i<che.length;i++){
					usernameList[i]=$(che[i]).parent().next().next().children().children().children("b").children("a").html();
					}
					for(var i = 0;i<usernameList.length;i++){
						var names = usernameList[i];
						$.post("addtagAjax.action",{name:names,tag:value});
					}
					$(".loading").hide("200");
					$(":checked:checkbox").parent().next().next().children().children().append("<code>"+value+"</code>");
				}
				$("#myc").hide("slow");
				$("#myh").css("border","1px solid #C8CECC;");
				$(":checkbox").parent().parent().css("background-color","#F9F7F7");
				$("#sall").html("Select all");
				$("#mesg").html("Select contacts to add tags, change who can see them, or delete.");
				$(".tab-pane").hide();
		
			});
				
			
			$("#cp").click(function(){
				$(":checked:checkbox").parent().next().next().children().children().children("img").show();
				var item = $(":checked:radio");
				if(item.length>0){
					var value = $(":checked:radio").val();
					var che = new Array();
					var usernameList = new Array();
					che =  $(":checked:checkbox");
					for(var i=0;i<che.length;i++){
					usernameList[i]=$(che[i]).parent().next().next().children().children().children("b").children("a").html();
					}
					for(var i = 0;i<usernameList.length;i++){
						var names = usernameList[i];
						$.post("changeviewAjax.action",{name:names,views:value});
					}
					
					if(value=="只有我"){
						$(":checked:checkbox").parent().next().next().children().children().children("b").children("img").show();
					}else if(value=="所有人"){
						$(":checked:checkbox").parent().next().next().children().children().children("b").children("img").hide();
					}
				}
				$(".loading").hide();
				$("#myc").hide("slow");
				$("#myh").css("border","1px solid #C8CECC;");
				$(":checkbox").parent().parent().css("background-color","#F9F7F7");
				$("#sall").html("Select all");
				$("#mesg").html("Select contacts to add tags, change who can see them, or delete.");
				$(".tab-pane").hide();
			});
			$("#delc").click(function(){
				$(":checked:checkbox").parent().next().next().children().children().children("img").show();
				var usernameList = new Array();
				var che = new Array();
				che =  $(":checked:checkbox");
				for(var i=0;i<che.length;i++){
				usernameList[i]=$(che[i]).parent().next().next().children().children().children("b").children("a").html();
				
				}
				for(var i = 0;i<usernameList.length;i++){
					var names = usernameList[i];
					$.post("delAjax.action",{name:names});
				}
				$(".loading").hide("2000");
				$(":checked:checkbox").parent().parent().remove();
				$("#myc").hide("slow");
				$("#myh").css("border","1px solid #C8CECC;");
				$(":checkbox").parent().parent().css("background-color","#F9F7F7");
				$("#sall").html("Select all");
				$("#mesg").html("Select contacts to add tags, change who can see them, or delete.");
				$(".tab-pane").hide();
			});
		});
	</script>
	
</body>
</html>